<template>
    <view class="page">
        <view class="card">
            <view class="title1">{{filterNull(schemeData.brandName)+" "+filterNull(schemeData.seriesName)}}</view>
            <view class="desc">{{filterNull(schemeData.modelName)}}</view>
        </view>
        <view class="card">
            <view class="title">是否支付定金</view>
            <u-radio-group v-model="formData.payDepositFlag" activeColor="#009B01">
                <u-radio label="是" :name="1" :customStyle="{marginRight: '16px'}"></u-radio>
                <u-radio label="否" :name="0"></u-radio>
            </u-radio-group>
            <view style="font-size:24upx; margin-top: 30upx">
                <view>常见问题：</view>
                <view>使用定金付款有什么好处？</view>
                <view>线下购车租车时，根据线上支付的意向金，可以享受优</view>
                <view>惠及礼品相赠；</view>
                <view>定金是否可退？</view>
                <view>线下核实之后是支持退款的；</view>
            </view>
        </view>
        <view class="card">
            <view class="title">订单备注</view>
            <u--textarea v-model="formData.orderRemark" placeholder="请输入备注信息" count :maxlength="50"></u--textarea>
        </view>

        <!-- 按钮区 -->
        <view class="bottom_btns_wrap" style="background:#fff">
            <view class="bottom_btns savepadding">
                <view class="button" @click="pre">上一步</view>
                <view class="button" @click="submitOrder">提交申请</view>
            </view>
        </view>
    </view>
</template>

<script>
import * as HomeApi from '@/common/apis/home-api';
import moment from '@/util/moment.js'

export default {
    data() {
        return {
            formData: {
                token: "", // 默认传用户openid
                schemeId: 0, // 1.直购，2分期购车，3租赁 需要传主方案id
                subSchemeId: "", // 1.直购不需要传，其他类型必填,子方案id
                storeId: "", // 门店id
                phone: "", // 联系手机号
                payDepositFlag: 0, // 是否支付定金：0、否 1、是
                orderRemark: "", // 订单备注
            },
            schemeData: {
                brandName: "",
                schemeId: "",
                seriesName: "",
                modelName: "",
                schemeTypeStr: "",
                schemeType: 0, //1.直购，2分期购车，3租赁 4.金融分期
                dataList: [],
                selectItem: 0,
            },
			orderno:'',
        };
    },
    computed: {
        openid() {
            return this.$store.state.user.openid;
        },
        userInfo() {
            return this.$store.state.user.userInfo;
        },
        storeInfo() {
            return this.$store.state.app.storeInfo
        },
    },
    async onLoad(op) {
        this.formData.token = this.openid; // 默认传用户openid
        this.formData.phone = this.userInfo.phone; // 手机号
        this.formData.storeId = this.storeInfo.storeId; // 门店id
        this.formData.schemeId = op.schemeId; // 1.直购，2分期购车，3租赁 需要传主方案id
        this.schemeData.brandName = op.brandName; // 品牌名称
        this.schemeData.seriesName = op.seriesName; // 车系名称
        this.schemeData.modelName = op.modelName; // 车型名称
    },
    methods: {
        /**
         * 调起微信支付
         */
        async requestPayment(value) {
            return new Promise((resolve, reject) => {
                uni.getProvider({
                    service: 'payment',
                    success: ({ provider }) => {
                        uni.requestPayment({
                            provider: provider[0],
                            timeStamp: value.timeStamp,
                            package: value.package,
                            paySign: value.paySign,
                            signType: value.signType,
                            nonceStr: value.nonceStr,
                            appId: value.appId,
                            // orderInfo: value.orderPaymentId,
                            success: res => {
								this.recordOrder();
                                resolve(true);
                            },
                            fail: err => {
                                uni.showToast({ title: '支付失败', icon: 'error' });
                                // this.cancelPayOrder(); // 取消支付订单
                                reject(false);
                            },
                            complete: res => {
                            }
                        })
                    }
                })
            })
        },
        /**
         * 提交订单
         */
        async submitOrder() {
            try {
                const result = await HomeApi.cluesbuycar(this.formData);

				this.orderno = result.orderId;

                // 如果支付定金的话
                if (this.formData.payDepositFlag == 1) {
                    const pay_res = await this.requestPayment(result);
                    if (!pay_res) {
                        return;
                    }
                }else{
					this.recordOrder();
				}


                uni.showToast({ title: '申请成功', icon: 'error' });
                setTimeout(() => {
                    uni.navigateBack()
                }, 1000);
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 上一步
         */
        async pre() {
            uni.navigateBack()
        },

		//下单操作记录
		async recordOrder(){
			let nowTimes = new Date().getTime();
			let duration = Math.round((nowTimes - getApp().globalData.taskStartTime)/1000);
			//访问
			this.$store.dispatch('home/recordUse', {
				recordType:4,
				recordOrderId:this.orderno,
				objRecordData:{
					durationTime:duration,
					recordTime:moment(nowTimes).format('YYYY-MM-DD HH:mm:ss'),
				}
			})
		},
    },
}
</script>

<style lang="scss" scoped>
.page {
    padding: $page_padding;
    padding-bottom: 120upx;
}
.card-title {
    font-size: 32upx;
    font-weight: bold;
    margin-bottom: 30upx;
    margin-left: 40upx;
}
.card {
    padding: 40upx 40upx;
    margin-bottom: 30upx;
    .title1 {
        font-size: 28upx;
        font-weight: bold;
        color: #333;
        margin-bottom: 27upx;
    }
    .title {
        font-size: 32upx;
        font-weight: bold;
        color: #333;
        margin-bottom: 29upx;
        display: flex;
        justify-content: space-between;
        align-content: center;
    }
    .desc {
        font-size: 28upx;
        font-weight: bold;
        color: #999;
    }

    .line {
        margin-bottom: 30upx;
        border-bottom: 1px solid #ddd;
    }

    .list {
        &.inline {
            display: flex;
            justify-content: space-between;
        }
        .label {
            margin-bottom: 30upx;
            font-size: 28upx;
            font-weight: bold;
            color: #333;
        }
        .text {
            font-size: 28upx;
            font-weight: bold;
            color: #999;
        }
    }

    .button-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .button {
            width: 180upx;
            line-height: 66upx;
            text-align: center;
            font-size: 28upx;
            font-weight: bold;
            color: #333;
            border: 1px solid #009B01;
            border-radius: 10px;
            margin-bottom: 20upx;
            &:not(:nth-child(3n + 0)) {
                margin-right: 20upx;
            }
            &.active {
                background: #009B01;
                color: #fff;
            }
            &.disable {
                background: #ddd;
                color: #999;
                border-color: #ddd;
            }
        }
    }
}

.total {
    font-size: 28upx;
    font-weight: bold;
    text {
        font-size: 28upx;
        font-weight: bold;
        color: #009B01;
    }
}

.bottom_btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    &_wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 10;
    }
    .button {
        flex: 1;
        line-height: 96upx;
        font-weight: bold;
    }
    .button:nth-child(1) {
        background: #fff;
        color: #666;
    }
    .button:nth-child(2) {
        background: #173b42;
        color: #fff;
    }
}

.blank-detail {
    font-size: 24upx;
    margin-left: 50upx;
    margin-bottom: 8px;
    color: #333;
}
</style>
